<template>
  <div class="box">
    <Header />
    <div class="content">
      <div>发布任务:</div>
      <div class="top">
        <span style="width:100px">待转译cUrl:</span>
        <el-input type="text" v-model="url" />
      </div>
      <div class="bot">
        <span style="width:100px">悬赏金额:</span>
        <el-input type="text" v-model="money" />
        <span>(元)</span>
      </div>

      <div class="fbTask">
        <el-button type="primary" @click="goOpen">发布任务</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Header from '../components/header.vue'
import { userApi } from '@/api/user'
import router from '../../router'

let obbj = ref()
let money = ref()
let url = ref()
onMounted(() => {
  url.value = router.currentRoute.value.query.name
  let userInfo = sessionStorage.getItem('userInfo')
  if (userInfo) {
    obbj.value = JSON.parse(userInfo)
    console.log(obbj.value)
  }
})

const goOpen = async () => {
  if (!url.value) {
    ElMessage.error('请输入转译URL')
    return
  }
  if (!money.value) {
    ElMessage.error('请输入悬赏金额')
    return
  }
  let res = await userApi.release({
    cUrl: url.value,
    rewardAmount: money.value,
    userId: obbj.value.id
  })
  if (res.meta.code== 2000) {
    ElMessage.success('发布成功')
    url.value = ''
    money.value = ''
  } else {
    ElMessage.error('发布失败')
  }
  console.log(res, 'dsaaa')
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  .content {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    margin-top: 30px;
    .bot {
      margin-top: 30px;
      width: 80%;
      padding: 20px;
      border: 1px solid #333;
      border-radius: 10px;
      display: flex;
      align-items: center;
    }
    .top {
      margin-top: 30px;
      width: 80%;
      padding: 20px;
      border: 1px solid #333;
      border-radius: 10px;
      display: flex;
      align-items: center;
    }
  }
}

.fbTask {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
</style>